<template>
  <div class="sticky-flow">
    <RatCard :title="'向你推荐'" :more="'/more-link'" :icon="'home-hots-icon'" class="sticky-flow-item">
      <template v-slot:body>
        <HomeRecommend
          v-for="recommend in recommends"
          :key="recommend.path"
          :icon="recommend.icon"
          :title="recommend.title"
          @click="aClick(recommend.path)"
        />
      </template>
    </RatCard>
    <RatCard :title="'直播'" :more="'/more-link'" :icon="'home-hots-icon'" class="sticky-flow-item">
      <template v-slot:body>
        <HomeLive v-for="live in lives" :key="live.path" :props="live" />
      </template>
    </RatCard>
  </div>
</template>

<script lang='ts'>
import { Component, Vue } from "nuxt-property-decorator";

@Component
export default class extends Vue {
  get nav() {
    return this.$store.state.homeModule.navs;
  }
  get recommends() {
    return this.$store.state.homeModule.recommends;
  }
  get lives() {
    return this.$store.state.homeModule.lives;
  }
  aClick(path: string) {
    this["$router"].push(path);
  }
}
</script>

<style lang='less' scoped>
.sticky-flow {
  .wh(100%);
  .flex-box(column, flex-start);
  .sticky-flow-item {
    .wh(100%, auto);
    margin-bottom: 15px;
  }
}
</style>